<template>
  <transition name="bounce" mode="out-in">
    <section class="mui-content pd">
      <mh-header headName="修改密码"> </mh-header>
      <div class="set-form">
          <div class="input-li">
            <input type="text" v-model="oldPassword" placeholder="请输入原密码">
          </div>
<!--           <div class="input-li new-li">
            <input type="text" v-model="newPassword" placeholder="请输入新密码">
            <span v-if='flag' class="cur" @click='getCode'>获取验证码</span>
            <span v-if='!flag'>重新获取{{time}}s</span>
          </div> -->
          <div class="input-li">
            <input type="text" v-model="newPassword" placeholder="请输入新密码">
          </div>
          <div class="input-li">
            <input type="text" v-model="againPassword" placeholder="请确认新密码">
          </div>

          <div class="mui-content-padded">
            <button type="button" class="mui-btn-block mh-btn" @click='submit'>确定</button>
          </div>

      </div>

    </section>
  </transition>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header';
  import {MH_API} from "@/api/api";
  export default {
    name: "setting",
    data () {
      return {
        type: 1,
        time: 10,
        oldPassword: '',
        newPassword: '',
        againPassword: '',
        flag: false
      }
    },
    methods: {
      getCode(){

      },
      submit(){
        let self = this;
        if(!self.oldPassword || !self.newPassword || !self.againPassword ){
          mui.toast('请输入密码');
          return false
        }
        if(self.newPassword != self.againPassword){
          mui.toast('两次密码不一致');
          return false
        }

        MH_API.updatePassword({
          old: self.oldPassword,
          new: self.newPassword,
          repeat: self.againPassword
        }).then(res => {
          if (res.status === 200) {
            mui.toast('修改成功');
          }
          else{
            mui.toast(res.msg);
          }
        })
      },
      contact(){

      }
    },
    components: {
      MhHeader
    }
  }
</script>

<style scoped>
  .set-form{ display: block; background-color: #fff; }

  .input-li{ display: block; margin: 0 1.5rem; border-bottom:1px solid #eee;}
  .input-li input{ display: block; height: 5rem; line-height: 5rem; border:none; margin: 0;}
  .new-li{ display: flex; justify-content: space-between;}
  .new-li input{ width: 25rem;}
  .new-li span{ display: inline-block; margin-top: 0.9rem; width: 9rem; height: 3.2rem; line-height: 3.2rem; border-radius: 0.5rem; text-align: center; font-size: 1.4rem; background-color: #ccc; color: #eee;}
  .new-li span.cur{ background-color: #E685AA; color: #fff; }
  .mui-content-padded{ margin-top: 10rem; }
</style>
